<template>
  <div class="PickerInput-container">
    <v-menu
      v-model="menu"
      ref="menu"
      :close-on-content-click="false"
      :return-value.sync="date"
      transition="scale-transition"
      offset-y
      min-width="auto"
    >
      <template v-slot:activator="{ on }">
        <div class="d-flex align-center">
          <span v-if="propLabel" class="label mr-4 flex-grow-0">
            {{ propLabel }}
          </span>
          <v-text-field
            class="date-input"
            v-bind="$attrs"
            v-on="on"
            v-model="dateFormatted"
            @focus="$event.target.blur()"
          >
            <template #append>
              <v-icon class="date-icon">mdi-calendar-month</v-icon>
            </template>
          </v-text-field>
        </div>
      </template>
      <v-date-picker
        v-model="date"
        :max="propMax"
        :min="propMin"
        no-title
        scrollable
      >
        <v-spacer></v-spacer>
        <v-btn text color="primary" @click="closeMenu"> Cancel </v-btn>
        <v-btn text color="primary" @click="submit"> OK </v-btn>
      </v-date-picker>
    </v-menu>
  </div>
</template>

<script lang="ts">
import { Vue, Component, ModelSync, Watch } from "vue-property-decorator";
@Component({
  props: {
    label: String,
    format: {
      type: String,
      default: "YYYY-MM-DD",
    },
    max: String,
    min: String,
  },
})
export default class PickerInput extends Vue {
  @ModelSync("value", "input", { type: String }) dateFormatted!: string;

  @Watch("menu", { immediate: true })
  watchMenu(val: boolean) {
    if (val) {
      this.parseDate(this.dateFormatted);
    }
  }

  get propMax() {
    return this.$props.max;
  }

  get propMin() {
    return this.$props.min;
  }

  menu = false;
  date = new Date(Date.now() - new Date().getTimezoneOffset() * 60000)
    .toISOString()
    .substring(0, 10);

  formatDate(date: string) {
    if (!date) return "";
    const [year, month, day] = date.split("-");
    let formatDate = this.propFormat.replace("YYYY", year);
    formatDate = formatDate.replace("MM", month);
    formatDate = formatDate.replace("DD", day);
    return formatDate;
  }

  parseDate(date: string) {
    if (!date) return "";

    const separator = this.propFormat.match(/\W+/);
    if (!separator) return;
    // 要根据propFormat分隔符split, 分割符要相同
    const splitDate = date.split(separator[0]);
    let year = "";
    let month = "";
    let day = "";
    this.propFormat
      .split(separator[0])
      .forEach((date: string, index: number) => {
        switch (date) {
          case "YYYY":
            year = splitDate[index];
            break;
          case "MM":
            month = splitDate[index];
            break;
          case "DD":
            day = splitDate[index];
            break;
        }
      });
    this.date = `${year}-${month.padStart(2, "0")}-${day.padStart(2, "0")}`;
  }

  closeMenu() {
    this.menu = false;
  }

  submit() {
    this.dateFormatted = this.formatDate(this.date);
    this.closeMenu();
  }

  get propFormat() {
    return this.$props.format;
  }

  get propLabel() {
    return this.$props.label;
  }
}
</script>

<style lang="scss" scoped>
@import "./PickerInput.scss";
</style>
